@extends("admin.layout.main")

@section("content")

    <style>
        .authority {
            margin-left: 3%;
            width: 70%;
        }

        .authority tr {
            border-bottom: 1px solid #ddd;
            /*height: 40px;*/
        }

        .authority ul li {
            float: left;
            width: 150px;
            text-align: left;
            line-height: 40px;
            list-style: none;
        }

        .authority ul li input {
            margin-right: 10px;
        }

        .col-sm-1 {
            width: 100px;
        }

        .error {
            width: fit-content !important;
            margin-left: 5px;
            color: red;
        }
    </style>
    <div class="page-header">
        <h1>
            角色管理
        </h1>
    </div>
    <form class="form-horizontal" id="form" action="{{ route('admin.platform.ajaxEditPosition') }}" method="post">
        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" style="font-size:20px;font-weight: bold">角色信息</label>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right"> 角色名称：</label>

            <div class="col-sm-9">
                <input type="text" required name="name" placeholder="请输入职务名称" class="col-xs-10 col-sm-5"
                       style="width: initial;">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" style="font-size:20px;font-weight: bold">权限分配</label>
        </div>
        <div class="form-group">
            @foreach($modules as $v)
                <div style="margin-top: 10px" class="module-list">
                    <label style="margin-left: 3%"><span style="font-weight: bold;margin-right: 73px">{{ $v->name }}</span> <input type="checkbox" name="module_all" onclick="module_all_select(this)" style="margin-right: 10px">全选</label>
                <table class="authority" style="text-align: left;">
                    @foreach($v->children as $cv)
                        <tr>
                            <td style="width: 80px;"><i class="fa fa-home" style="margin-right: 2px"></i>{{ $cv->name }}
                            </td>
                            <td>
                                <ul>
                                    <li><input type="checkbox" onclick="all_select(this)" name="all">全选</li>
                                    @foreach($cv->children as $v2)
                                        <li><input type="checkbox" name="actionLists[]" onclick="check_all_select(this)"
                                                   value="{{ $v2->id }}">{{ $v2->name }}</li>
                                    @endforeach
                                </ul>
                            </td>
                        </tr>
                    @endforeach
                </table>
                </div>
            @endforeach
        </div>
        <div class="clearfix form-actions">
            <div class="col-md-offset-2 col-md-9">
                <input type="hidden" name="type" value="1">
                <button class="btn btn-info" type="submit" id="submit">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                </button>

                &nbsp; &nbsp; &nbsp;
                <a class="btn" onclick="window.history.back()">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    取消
                </a>
            </div>
        </div>

    </form>
    <script src="{{ config('global.assets_path') }}js/jquery.validate.min.js"></script>
    <script src="{{ config('global.assets_path') }}js/messages_zh.js"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script src="/plugins/layui/layui_component.js"></script>
    <script src="/js/ajax.js"></script>
    <script>
        function check_all_select(obj) {
            var leng = $(obj).parents('tr').find('input[name="actionLists[]"]').length;
            var check_leng = $(obj).parents('tr').find('input[name="actionLists[]"]:checked').length;
            var all_leng = $(obj).parents('div .module-list').find('input[name="actionLists[]"]').length;
            var all_check_leng = $(obj).parents('div .module-list').find('input[name="actionLists[]"]:checked').length;
            if (leng == check_leng) {
                $(obj).parents('tr').find('input[name="all"]').prop('checked', obj.checked);
            } else {
                $(obj).parents('tr').find('input[name="all"]').attr('checked', false);
            }
            if(all_leng == all_check_leng){
                $(obj).parents('div .module-list').find('input[name="module_all"]').prop('checked', obj.checked);
            }else{
                $(obj).parents('div .module-list').find('input[name="module_all"]').attr('checked', false);
            }
        }

        function all_select(obj) {
            $(obj).parent().parent().find("input").prop('checked', obj.checked);
            check_all_select(obj);
        }

        function module_all_select(obj) {
            $(obj).parents('div .module-list').find("input").prop('checked', obj.checked);
        }
    </script>
@endsection